import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Result, List, WhiteSpace, Button, Modal} from 'antd-mobile'
import Cookies from 'js-cookie'
import {resetMsg} from '../../redux/action'

const Item = List.Item;
const Brief = Item.Brief;

// 个人中心路由组件
class Personal extends Component {

    handleLogout = () => {
      Modal.alert('退出', '确认退出登录吗', [
          {
              text:'取消',
              onPress: () => console.log('cancel')
          },
          {
              text: '确认',
              onPress: () => {
                  Cookies.remove('userid');
                  // 消除redux管理user
                  this.props.resetMsg();
              }
          }
      ])
    };

    render () {
        const {username, info, header, company, post, salary} = this.props.user;

        return (
            <div>
                <Result img={<img src={require(`../../assets/images/${header}.png`)} style={{width: 50}} alt={'header'}/>} title={username} message={company} />
                <List renderHeader={() => '相关信息'}>
                    {/*表示item为多行*/}
                    <Item multipleLine>
                        <Brief>职位:{post}</Brief>
                        {salary ? <Brief>月薪:{salary}</Brief> : null}
                        <Brief>简介:{info}</Brief>
                    </Item>
                </List>
                <WhiteSpace/>
                <List>
                    <Button type={'warning'} onClick={this.handleLogout}>退出登录</Button>
                </List>
            </div>
        )
    }
}

export default connect (
    state => ({user: state.user}),
    {resetMsg}
) (Personal)
